@extends('family::layout')

@section('title', '评测列表')

@section('content')
    <div class="content-header sty-one">

    <div class="card border-no">

        {{--<h5 class="text-black f-20">干预记录--{{ $child->name }}--{{$game->name}}</h5>--}}
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <canvas id="canvas"></canvas>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th scope="col">干预项目</th>
                        <th scope="col">用时</th>
                        <th scope="col">干预结果</th>
                        <th scope="col">开始时间</th>
                        <th scope="col">详情</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(isset($list))
                        @foreach($list as $idx => $item)

                                <tr onclick="location.href='{{ route('family.training.view', ['id' => $item->id]) }}';">
                                    <td> {{ $item->game->name }}</td>
                                    <td>{{ $item->use_time }}</td>
                                    <td>
                                        @if($item->result ==1)
                                        <span class="success">成功</span>
                                        @else
                                        <span class="fail">失败</span>
                                        @endif
                                    </td>
                                    <td>{{ $item->start_time }}</td>
                                    <td>
                                        <a href="{{ route('family.training.view', ['id' => $item->id]) }}">
                                            <span class="pull-right badge bg-green-active">&gt;</span>
                                        </a>
                                    </td>
                                </tr>

                        @endforeach
                    @endif
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="clearfix"></div>
                <div class="col-md-12 col-sm-12 col-xs-12 pull-right">
                    @if(isset($list))
                        {{ $list->links() }}
                    @endif
                </div>
            </div>
        </div>
    </div>
@stop

        @section('script')
            <script>
                $("document").ready(function (){
                    changeData();
                });

                //生成chart
                function changeData(){
                    let url = "{{route("family.training.ajaxgamedata", ['child_id'=>$child->id, 'game_id'=>$game->id])}}"

                    $.get(url,function (backData){
                        if (backData.status == 200){
                            createChart(backData.data)
                        }else {
                            console.log(backData);
                        }
                    })
                }

                function createChart(result){

                    var data = [];
                    var thisdata = {};

                    thisdata.backgroundColor = window.chartColors["red"];
                    thisdata.label = "干预用时,（单位：秒）";
                    thisdata.data = result.y;
                    data.push(thisdata);

                    var thisconfig = createConfig(result.labels, data, "干预用时,(失败显示为用时的负数)");
                    var num = thisdata.data.length;

                    if(num > 3){
                        $("#canvas").css('height', num * 40);
                        console.log($("#canvas").css('height'));
                    }

                    var ctx = document.getElementById("canvas").getContext('2d');
                    var chart = new Chart(ctx, thisconfig);
                }

                function createConfig(labels, data, title) {
                    console.log(data);
                    return {
                        type: 'horizontalBar',
                        data: {
                            labels:labels,
                            datasets: data

                        },
                        options: {
                            responsive: true,
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: title
                            },
                            maintainAspectRatio: false,

                            scales: {
                                xAxes: [{
                                    position:'top',
                                    gridLines:{
                                        display: false
                                    },
                                    ticks: {
                                        stepSize:1,
                                        beginAtZero: true,
                                    }
                                }],
                                yAxes:[{
                                    gridLines:{
                                        display: false
                                    }
                                }]
                            }

                        }
                    };
                }
            </script>
@stop
